<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <script src="../lib/layui/layui.js"></script>
  <style>
    .headerText{
      background: #009688;
      color: #fff;
      line-height: 40px;
      text-align: center;
      margin: 10px 0;
    }
    .wt_listbox22 {
      margin-bottom: 10px;
      min-height: 350px;
      border-top: 1px dashed #009688;
    }
    .wt_listbox li {
      padding-top: 18px;
      padding-bottom: 17px;
      border-bottom: 1px dashed #009688;
    }
    .wt_bt2 {
      float: none;
    }
    .wt_bt {
      display: flex;
      align-items: center;
      padding-left: 20px;
      padding-top: 3px;
      padding-bottom: 3px;
      font-size: 16px;
      color: #333;
      overflow: hidden;
      background: url(../2images/bacz.png) no-repeat 28px -441px;
      cursor: pointer;
    }
    .wt_hd {
      overflow: hidden;

      padding-left: 70px;
      line-height: 32px;
      padding-top: 12px;
      padding-bottom: 0px;
      display: block;
      font-size: 16px;
      color: #333;
      word-break: break-all;
      text-align: left;
      font-family: "Microsoft Yahei";
    }
    .dateouter{
      display: inline-block;
      padding-right: 20px;
    }
    .d0_date{
      padding-right: 20px;
      color: #ccc;
    }
    .wt_bt__outer{
      display: none;
    }
    .wen,.huida{
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      background: #009688 ;
      margin-right: 20px;
    }
    .huida{
      text-indent:0;
      background: #ff8507;
    }
    .huidapop{
      padding: 20px;

    }
    .txt{
      color: red;
    }
    #popSearchRoleTest,#popSearchRoleTest2{
      display: none;
    }
    .wt_hd_img{
         padding: 20px 0 0 70px;
    }
    .wt_hd_img .wt_hd_imgitem{
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .wt_hd_img .wt_hd_imgitem img{
      width: 100%;
      height: 100%
    }
    .wt_hd_video{
      padding-left: 70px;
    }
    .wt_hd_video video{
      width: 350px;
      height: 200px;
      background: black;
    }
    .hdnum{
      display: inline-block;
      width: 20px;
      height: 17px;
      padding-left: 20px;
      background: url("../styles/img/hdnum.png") no-repeat ;
      background-size:contain ;
      margin-right: 10px;
      color: #ccc;
    }
    .wt_content{
      flex: 1;
    }
    .wt_hd_inner{
      display: flex;
      align-items: center;
    }
  </style>
</head>
<style>

</style>
<body>
  <div class="headTitle">
    在线咨询
  </div>
  <div class="content">
    <div class="layui-row headerText" >问题查询
    </div>
    <form action="" class="layui-form">
      <div class="layui-row" style="margin-top: 20px;">
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">问题分类</label>
            <div class="layui-input-block">
              <select name="">
                <option value="">请选择</option>
                <option value="">请选择</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
          <div class="layui-form-item">
            <label class="layui-form-label">搜索</label>
            <div class="layui-input-block">
              <input type="text" name="title" required="" lay-verify="required" placeholder="请输入搜索内容" autocomplete="off"
                class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
          <a href="###" class="layui-btn">查询</a>
          <a href="###" class="layui-btn">重置</a>
          <a href="###" class="layui-btn btn-jlzx">交流咨询</a>
        </div>
      </div>
    </form>
    <div class="layui-row headerText">在线咨询
    </div>
    <ul class="wt_listbox wt_listbox22">
      <li>
        <div class="wt_wt">
          <div class="wt_bt wt_bt2"><span class="wen">问</span><span class="wt_content">问题1问题1问题1问题1问题1问题1 </span><span class="hdnum">3</span><span class="dateouter"><span class="d0_date">2017-12-06</span><button class="layui-btn btn-hd" >解答</button></span></div>
          <div class="wt_hd_img">
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
            <div class="wt_hd_imgitem"><img src="http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"></div>
          </div>
          <div class="wt_hd_video">
            <video controls="controls"  poster="放图片，为了防止视频没加载完成显示空白" >

              <source src="视频路径" type="video/mp4" id="source"/>

              Your browser does not support the video tag.
            </video>
          </div>
        </div>
        <div class="wt_bt__outer">
          <div class="wt_hd" >
            <div class="wt_hd_inner"><span class="huida">专</span><span class="wt_content">答：1回答回答回答回答回答回答回答回答回答回答回答回答回答。 </span><div class="dateouter"><button class="layui-btn layui-btn-danger btn-del" >删除</button><button class="layui-btn btn-tw" >提问</button></div></div>
          </div>
          <div class="wt_hd" >
            <div class="wt_hd_inner"><span class="huida">专</span><span class="wt_content">答：2回答回答回答回答回答回答回答回答回答回答回答回答回答。 </span><div class="dateouter"><button class="layui-btn layui-btn-danger btn-del" >删除</button><button class="layui-btn btn-tw" >提问</button></div></div>
          </div>
          <div class="wt_hd" >
            <div class="wt_hd_inner"><span class="huida">专</span><span class="wt_content">答：3回答回答回答回答回答回答回答回答回答回答回答回答回答。 </span><div class="dateouter"><button class="layui-btn layui-btn-danger btn-del" >删除</button><button class="layui-btn btn-tw" >提问</button></div></div>
          </div>
        </div>
      </li>
      <li>
        <div class="wt_wt">
          <div class="wt_bt wt_bt2"><span class="wen">问</span>问题1问题1问题1问题1问题1问题1 <span class="dateouter"><span class="d0_date">2017-12-06</span>  <button class="layui-btn btn-hd" >解答</button></span></div>
        </div>
        <div class="wt_bt__outer">
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
        </div>
      </li>
      <li>
        <div class="wt_wt">
          <div class="wt_bt wt_bt2"><span class="wen">问</span>问题1问题1问题1问题1问题1问题1 <span class="dateouter"><span class="d0_date">2017-12-06</span>  <button class="layui-btn btn-hd" >解答</button></span></div>
        </div>
        <div class="wt_bt__outer">
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
        </div>
      </li>
      <li>
        <div class="wt_wt">
          <div class="wt_bt wt_bt2"><span class="wen">问</span>问题1问题1问题1问题1问题1问题1 <span class="dateouter"><span class="d0_date">2017-12-06</span>  <button class="layui-btn btn-hd" >解答</button></span></div>
        </div>
        <div class="wt_bt__outer">
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
        </div>
      </li>
      <li>
        <div class="wt_wt">
          <div class="wt_bt wt_bt2"><span class="wen">问</span>问题1问题1问题1问题1问题1问题1 <span class="dateouter"><span class="d0_date">2017-12-06</span>  <button class="layui-btn btn-hd" >解答</button></span></div>
        </div>
        <div class="wt_bt__outer">
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
        </div>
      </li>
      <li>
        <div class="wt_wt">
          <div class="wt_bt wt_bt2"><span class="wen">问</span>问题1问题1问题1问题1问题1问题1 <span class="dateouter"><span class="d0_date">2017-12-06</span>  <button class="layui-btn btn-hd" >解答</button></span></div>
        </div>
        <div class="wt_bt__outer">
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
          <div class="wt_hd" >
            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>
          </div>
        </div>
      </li>
    </ul>
    <div id="page" ></div>
  </div>
  <div id="popSearchRoleTest">
    <div class="layui-row" style="color: #fff; height: 40px;background:#009688;text-align: center;line-height: 40px;">
      回答
    </div>
    <div class="layui-row huidapop" >
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label"><i class="txt">*</i>回答内容</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center">
        <button class="layui-btn hd_tj">提交</button>
        <button class="layui-btn layui-btn-primary hd_qx">取消</button>
      </div>
    </div>
  </div>
  <div id="popSearchRoleTest2">
    <div class="layui-row" style="color: #fff; height: 40px;background:#009688;text-align: center;line-height: 40px;">
      写下您的问题
    </div>
    <div class="layui-row huidapop" >
      <div class="layui-form-item layui-form-text">
        <form action="" class="layui-form">
          <div class="layui-form-item">
            <label class="layui-form-label"><i class="txt">*</i>问题标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" required="" lay-verify="required" placeholder="请输入设备序列号"
                     autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label"><i class="txt">*</i>问题分类</label>
              <div class="layui-input-block">
                <select name="swc1" lay-verify="required">
                  <option value="">请选择</option>
                  <option value="1">请选择</option>
                </select>
              </div>
            </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label"><i class="txt">*</i>回答内容</label>
            <div class="layui-input-block">
              <textarea placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item" style="text-align: center">
            <button class="layui-btn tw_tj" lay-submit="" lay-filter="formDemo">提交</button>
            <button class="layui-btn tw_qx layui-btn-primary">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../lib/JQuery.js"></script>
<script>
  var   nowhdbtn=0;  //当前点击第几个回答按钮
  layui.use('form', function () {
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function (data) { //提交事件回调
      layer.msg(JSON.stringify(data.field));
      return false;
    });
  });

  layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
          elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
          count: 50, //数据总数，从服务端得到
          jump: function (obj, first) {
              //obj包含了当前分页的所有参数，比如：
              console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              console.log(obj.limit); //得到每页显示的条数
          }
      });
  });
  $(function () {
      $('body').on('click','.wt_listbox li',function () {
          var dom=$(this).children('.wt_bt__outer')
          if(dom.css('display')=='none'){
              dom.slideDown(300)
          }else{
              dom.slideUp(300)
          }
      })

      //点击回答方法
      $('body').on('click','.wt_listbox .btn-hd',function (e) {
          e.stopPropagation();
          nowhdbtn= $(this).parent().parent('').parent('').parent('li').index() ; //设置当前点击第几个回答按钮
          handleClick()
      })

      //点击回提问
      $('body').on('click','.wt_listbox .btn-tw',function (e) {
          e.stopPropagation();
          handleClick2()

      });
      
      $('body').on('click','.btn-jlzx',function () {
          handleClick2()
      })

      //回答弹窗 提交按钮
      $('body').on('click','.hd_tj',function () {
          layer.closeAll(); //关闭所有层
          addhddata()     //插入回答问题
      })
      //回答弹窗 取消按钮
      $('body').on('click','.hd_qx',function () {
          layer.closeAll(); //关闭所有层
      })

      //问答弹窗 提交按钮
      $('body').on('click','.wt_tj',function () {
          layer.closeAll(); //关闭所有层
      })

      //问答弹窗 取消按钮
      $('body').on('click','.wt_qx',function () {
          layer.closeAll(); //关闭所有层
      })
      
      
      //点击删除方法回答
      $('body').on('click',".btn-del",function (e) {
          e.stopPropagation()
          $(this).parent().parent().remove()
      })
      
  })

  function addhddata() {   //插入回答问题
      $('.wt_listbox li .wt_bt__outer').append('<div class="wt_hd" >\n' +
          '            <div><span class="huida">专</span>答：回答回答回答回答回答回答回答回答回答回答回答回答回答。 <span class="dateouter"><button class="layui-btn btn-tw" >提问</button></span></div>\n' +
          '          </div>')
  }

  
  function handleClick() {
      layer.open({
          //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          type: 1,
          title: false,
          area: ['80%', '250px'],
          content: $("#popSearchRoleTest"),
          success: function (layero, index) {
          }
      });
  }

  function handleClick2() {
      layer.open({
          //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          type: 1,
          title: false,
          area: ['700px', '350px'],
          content: $("#popSearchRoleTest2"),
          success: function (layero, index) {

          }
      });
  }
</script>